// *********************************************1.加载分类下拉选择
let layer = null;
let form = null;
layui.use(['layer', 'form'], function () {
    layer = layui.layer;
    form = layui.form;

    $("select").append(`<option value="">请选择文章类别</option>`)
    $.ajax({
        url: "/my/article/cates",
        success: function (res) {
            if (res.status == 0) {
                // 遍历添加内容
                $.each(res.data, function (index, item) {
                    let one = $(`<option value="${item.Id}">${item.name}</option>`);
                    $("select").append(one);
                });
                form.render('select'); //刷新select选择框渲染
            }
        }
    });

    //***********************************************2. 初始化富文本编辑器
    initEditor();



    //**************************************************3.图片裁剪
    // 基于jq；后面cropper方法因为插件JS导致
    $('#image').cropper({
        // 纵横比(宽高比)
        aspectRatio: 10 / 7, // 正方形
        // 指定预览区域
        preview: '.img-preview' // 指定预览区的类名（选择器）
    });

    // 原有选择文件按钮 样式不好看，修改不了！隐藏起来！
    // 点击样式设置好的那个按钮，触发原来按钮
    $("#file_cp").on("click", function () {
        $("#file").click(); // JS代码模拟点击行为
    });

    // 选择完图片后，打开文件。获取到选择这个文件信息，设置给img;
    // 表单：change  
    $("#file").on("change", function () {

        // 1.拿到图片信息
        let obj = this.files[0];


        // 2.需要把图片对象 转换为  临时图片地址
        let src = URL.createObjectURL(obj);


        // 3. 设置给 img；主要原因：$('#image')已经经过cropper插件处理 JQ对象；
        $('#image').cropper("replace", src);
    });


    //**************************************************4.提交
    $('form').on('submit', function (e) {
        e.preventDefault()

        // 获取表单内容
        let fd = new FormData(this)

        // console.log(fd); //不能直接打印

        // fd.forEach(function (a, b) {
        //     console.log(a, b);
        // })

        // 2.图片 cropper处理：blob二进制
        let canvas = $('#image').cropper('getCroppedCanvas', {
            width: 400,
            height: 280
        });
        canvas.toBlob(function (blob) {
            fd.append("cover_img", blob); // 多fd添加一项

            // ajax请求必须资额在toBlob回调函数内部
            $.ajax({
                url: '/my/article/add',
                type: 'post',
                data: fd,
                processData: false, //不转换
                contentType: false, //不编码
                success: function (res) {
                    layer.msg(res.message)
                }
            })


        })


















    })
})